<template>
    <el-container v-loading="loading">
        <div class="container">
            <h1 style="font-size: 35px;" >News & Events</h1>
            <div class="year_container" v-for="year in sortedYears" :key="year" :id="year">
                <h1 style="font-size: 30px;">{{ year }}</h1>
                <div class="news-item" v-for="month in sortedMonths(Object.keys(newsListByYear[year]))">
                    <div class="news-month">
                        <h2 style="font-size: 25px;">{{ month }}</h2>
                    </div>
                    <div class="news-content" v-for="ele in newsListByYear[year][month]">
                        <h3 style="font-size: 20px;">{{ ele.fields.title }}</h3>
                        <pre> </pre>
                        <div v-if="ele.fields.url">
                            <a :href="ele.fields.url" target="_blank">{{ ele.fields.content }}</a>
                        </div>
                        <div v-else>
                            <p>{{ ele.fields.content }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script lang="ts" setup name="News">
    import { get, post } from '../../axios/api';
    import { computed, onBeforeMount, ref } from 'vue';
    import { ElMessage } from 'element-plus'

    let loading = ref(false)
    let sortedYears:any = ref({})
    let newsListByYear:any = ref({})

    function sortedMonths(data:any) {

        data.sort((a:any, b:any) => {
            const customOrder = ["December", "November", "October", "September", "August", "July", "June", "May", "April", "March", "February", "January"];
            return customOrder.indexOf(a) - customOrder.indexOf(b);
        });
        return data
    }

    async function getData() {
        let res:any = {}
        loading.value = true
        try {
            res = await post('/get_news/',)
            if (res && res.success) {
                console.log(res)
                sortedYears.value = Object.keys(res.list).sort((a, b) => {
                    return parseInt(b) - parseInt(a)
                })
                //
                newsListByYear.value = res.list
                loading.value = false
                console.log(newsListByYear)
                console.log(sortedYears)
            } else {
                loading.value = false
                ElMessage({
                    message: res.msg || 'An error occured',
                    type: 'error',
                })
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }

    onBeforeMount(() => {
        getData()
    })

</script>

<style scoped>
    a {
        text-decoration: none;
    }

    .news-content {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        font-size: 20px;
    }

    @media screen and (max-width: 768px) {
        .container {
            width: 90%;
            margin: auto;
        }
    }
</style>